<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: aqua;
    }
   div{
    width: 400px;
    height: 400px;
    margin: 200px auto;
    background-color: burlywood;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }
</style>
<body>
    <div>
<!-- 五一倒数 -->
<p>距离五一放假还有</p>
<p id="havetime"></p>


<!-- 表格效果 -->
<table border="1" id="tables">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>
    </div>
    
    
    <script>
        //表格效果
        var tableEl = document.getElementById('tables');
        var rowEl = tableEl.rows[1];
        var j=0;
        for(var i=0;i<4;i++){
          if(j<4){
            rowEl = tableEl.rows[i];
            rowEl.cells[j].style.backgroundColor = 'red';
          }
          ++j;
        }
       
        //五一倒计时
      
      

       
      
      
        function diffTime() {
      var tar = new Date(2023, 3, 28, 18, 00, 00);
      var current = new Date();
      
      var diffMs = Math.ceil((tar.getTime() - current.getTime()) / 1000);
   
      
      var day = Math.floor(diffMs / (24 * 60 * 60)); //1.5   1天 xx小时
      var hours = Math.floor((diffMs % (24 * 60 * 60)) / (60 * 60));
      var minutes = Math.floor((diffMs % (60 * 60)) / 60);
      var seconds = diffMs % 60;
      var res = (`${day}天${hours}时${minutes}分${seconds}秒`);
      return res;
      }
    
 
      setInterval(function(){
        var time = diffTime();
        var Pname = document.getElementById('havetime');
        Pname.innerHTML = time;
        // console.log(time);
      },1000);
      


      






    </script>

</body>
</html>